/*
 * @Author: Hansen 
 * @Date: 2020-09-19 11:15:36 
 * @Last Modified by: Hansen
 * @Last Modified time: 2020-09-19 12:03:56
 */

 /* 菜单组件 */
 /* 菜单项 */
 .tt-menu > .tt-menu-item{
   display: flex;
   height: 2.3rem;
   padding: 0 1rem;
   align-items: center;
   border-bottom: 1px solid #eee;
   font-size: 0.8rem;
 }
 /* 菜单名称 */
 .tt-menu > .tt-menu-item > .tt-menu-name{
   flex: 1;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #333;
 }
 /* 菜单信息 */
 .tt-menu > .tt-menu-item > .tt-menu-value{
   max-width: 5rem;
   height: 1rem;
   line-height: 1rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #999;
 }
 /* 下级操作引导图表 */
 .tt-menu > .tt-menu-item > .tt-menu-icon{
   margin-left: 0.3rem;
   color: #999;
 }
 /* 切换开关 */
 .tt-menu > .tt-menu-item > .tt-switch{
   position: relative;
   box-sizing: content-box;
   width: 2.6rem;
   height: 1.4rem;
   border: 1px solid #ccc;
   outline: 0;
   border-radius: .75rem;
   background-color: rgba(0, 0, 0, 0.1);
   transition: background-color .3s, border .3s;
   /* 去掉webkit内核里默认的样式 */
   -webkit-appearance: none;
   /* 去掉webkit内核里默认的点击效果 */
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 /* 选中状态下，改变开关边框和背景色 */
 .tt-menu > .tt-menu-item > .tt-switch:checked{
   border-color: #07c160;
   background-color: #07c160;
 }
 /* 使用::after为元素实现圆形按钮的样式 */
 .tt-menu > .tt-menu-item > .tt-switch::after{
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.7rem;
  background-color: #fff;
  box-shadow: 0 0 2px #999;
  transition: left 0.3s;
 }
 /* 选中状态下，更改圆形按钮的位置 */
.tt-menu > .tt-menu-item > .tt-switch:checked::after{
  left: 1.2rem;
}